window.onload = () => {
    // ?获取username password
    $('#username').val(localStorage.getItem('username'));
    $('#password').val(localStorage.getItem('password'));
    //! 二维码滑动;
    QR_code()

    function QR_code() {
        $('.QR_code').hover((e) => {
            $('.qrcode-img').stop()
            $('.qrcode-img').animate({ 'left': 0 }, 300, 'swing', () => {
                $('.qrcode-help').css('display', 'block')
            })
        }, () => {
            $('.qrcode-img').stop()
            $('.qrcode-help').css('display', 'none')
            $('.qrcode-img').animate({ 'left': 60 }, 300, 'swing')
        })
    }
    // ! 切换
    Switch()

    function Switch() {
        $('.title').on('click', function(e) {
            $(this).addClass('check')
            $(this).siblings().removeClass('check')
            $('.co-main').eq($(this).index()).css('display', 'block')
            $('.co-main').eq($(this).index()).siblings().css('display', 'none')
        })
    }
    // !输入框
    input()

    function input() {
        // !username
        // ?聚焦
        $('#username').on('focus', () => {
            $('.username label').css('backgroundPosition', '0 -48px')
        });
        // ? 失焦
        $('#username').on('blur', () => {
            $('.username label').css('backgroundPosition', '0 0')
        });
        // ?input
        $('#username').on('input', () => {
            if ($('#username').val() == '') {
                $('.username span').css('display', 'none')
            } else {
                $('.username span').css('display', 'block')
            }
        });
        //! password
        // ? 聚焦
        $('#password').on('focus', () => {
            $('.password label').css('backgroundPosition', '-48px -48px')
        });
        // ? 失焦
        $('#password').on('blur', () => {
            $('.password label').css('backgroundPosition', '-48px 0')
        });
        $('#password').on('input', () => {
            if ($('#password').val() == '') {
                $('.password span').css('display', 'none')
            } else {
                $('.password span').css('display', 'block')
            }
        });
    }
    // ! input删除
    del()

    function del() {
        $('.del').on('click', function() {
            $(this).prev().val('')
            $(this).css('display', 'none')
        })
    }
    // !登录
    // 登录按钮
    $('button').on('click', () => {
        if ($('#username').val() == '' && $('#password').val() == '') {
            $('.msg-wrap').css('visibility', 'visible')
        } else if ($('#username').val() == '') {
            $('.msg-wrap').html('<span></span>请输入账户名')
            $('.msg-wrap').css('visibility', 'visible')
        } else if ($('#password').val() == '') {
            $('.msg-wrap').html('<span></span>请输入密码')
            $('.msg-wrap').css('visibility', 'visible')
        } else {
            let username = $('#username').val();
            let password = $('#password').val();
            let params = { username, password };
            axios.get(loginAPI, { params })
                .then(({ data }) => {
                    console.log(data);
                    if (data.code == 1) {
                        $('.msg-wrap').css('visibility', 'hidden');
                        $('button').text('正在登录...');
                        // ?必须存uid token username password
                        localStorage.setItem('uid', data.data.id)
                        localStorage.setItem('token', data.data.token)
                        localStorage.setItem('username', username)
                        localStorage.setItem('password', password)
                        setTimeout(() => {
                            window.location.href = './index.html'
                        }, 2000)
                    } else {
                        $('.msg-wrap').html('<span></span>账户名与密码不匹配，请重新输入')
                        $('.msg-wrap').css('visibility', 'visible')
                    }
                })
        }
    })
}